<template>
	<view>
		<!-- 	<view :class="['topbar',isshowtopbar?'topbarshow':'topbarhidden']" :style="{height:topbarheight+'rpx'}"></view> -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="ttyl-logo">
				<image class="logoicon" src="/static/image/top-appicon.png" mode="aspectFill"></image>
			</view>
			<!-- <view style="background-color: #F0AD4E;" @click="gotoindex('/pages/activity/activity')">123213</view> -->
			<view class="top">
				<!--公告-->
				<view class="notice" >
					<view class="notice-left">
						<image src="/static/image/laba2.png" mode="aspectFill"></image>
					</view>
					<view class="notice-right" >
						<!-- <view class="swiper">
						<text-scroll :textarr="mascot"></text-scroll>
					</view> -->
						<swiper class="swiper" autoplay="true"  vertical="true" >
							<swiper-item v-for="(item,index) in notice" :key="index" @click="gotoindex(item.url)">
								<view class="textwidth">{{item.title}}</view>
							</swiper-item>
						</swiper>
						<view class="swipermore" @click="gotoindex('/pages/notice/notice')">
							<view style="margin-right: 5rpx;">更多</view>
							<view> ›</view>
						</view>
					</view>
				</view>
				<!--3D轮播-->
				<blackmonth-swiper :swiperList="swiperList"></blackmonth-swiper>
				<!--appicon图标-->
				<view class="appicon">
					<view class="icon-item" v-for="(item,index) in appicon" :key="index" @click="navgoto(item.url,index)">
						<image :src="item.icon" mode="aspectFill" :class="[item.weight==filternum?'filter':'']"></image>
						<view class="appicontext">
							<text>{{item.title}}</text>
							<view v-if="!apptouchday[index]" class="origins"></view>
						</view>
					</view>
				</view>
			</view>

	<!-- 		<view v-if="isshowlist">
				<view class="share">
					<view class="share-box">
						<text class="share-title">{{dreawtitle}}抽奖</text>
						<view class="share-right">
							<text @click="gotoindex('/pages/webview/webview?url=http://recharge.607068.com/rg-static/extension.html')">我要上首页</text>
							<text class="line">|</text>
							<text @click="sharequn">分享</text>
						</view>
					</view>
				</view>
				<prizelist :giftlist="giftlist"></prizelist>
			</view> -->
			<!--任务推荐-->
			<view class="share">
				<view class="share-box">
					<text class="share-title">最新任务</text>
					<view class="share-right" @click="moretask">
						<text>更多任务</text>
						<text class="iconfont">&#xe616;</text>
					</view>
				</view>
			</view>
			<!--循环推荐任务列表-->
			<view class="task-info" v-for="(item,index) in moonlight" :key="index" @click="gototask(item.id)">
				<!-- <view class="giveup">放弃过</view> -->
				<view class="task-item">
					<image :src="item.thumb" mode="aspectFill"></image>
					<view class="task-detail">
						<view class="task-app">{{item.title}}</view>
						<view class="task-category">{{item.cTitle}}</view>
						<view class="task-count">任务进度：{{item.quantity-item.surplus}}/{{item.quantity}}</view>
					</view>
				</view>
				<view class="commission">
					<view class="add">+</view>
					<view class="money">{{item.arrive_price}}</view>
					<view class="yang">元</view>
				</view>
			</view>
			
		<!-- 	<view class="task-box">
				<view class="item-box" v-for="(item,index) in moonlight" :key="index" @click="gototask(item.id)">
					<image :src="item.thumb" mode="aspectFill"></image>
				
					<view class="title">{{item.title.length>5?item.title.substr(0,5)+'...':item.title}}</view>
					<view class="cate">{{item.cTitle}}</view> 
					<view class="money"><text>¥</text>{{item.arrive_price}}</view>
				</view>
			</view> -->
			<!--推荐福利列表-->
				<view class="share">
					<view class="share-box">
						<text class="share-title">推荐福利</text>
						<view class="share-right">
							<text @click="gotoindex('/pages/webview/webview?url=http://recharge.607068.com/rg-static/extension.html')">我要上首页</text>
							<text class="line">|</text>
							<text @click="sharequn">分享</text>
						</view>
					</view>
				</view>
				<prizelist :giftlist="prizelist.recommend"></prizelist>


				<!--自助福利列表-->
				<view class="share">
					<view class="share-box">
						<text class="share-title">自助福利</text>
					</view>
				</view>
				<prizelist :giftlist="prizelist.self"></prizelist>
			
			<view class="index-bottom">
				<!--我要上首页-->
				<view @click="gotoindex('/pages/webview/webview?url=http://recharge.607068.com/rg-static/extension.html')" class="pushtop">我要上首页<text>›</text></view>
				<!--轮播图广告-->
				<adver advertype="index" :lineobject="{width:'72%',left:'220rpx'}"></adver>
				<view style="height: 50rpx;"></view>
			</view>
		</mescroll-body>

		<!--新人红包弹窗-->
		<firstredbg @getmember="getmember" :redbagvisible="visible" :maintitle="redbagobject.maintitle" :subtitle="redbagobject.subtitle"
		 :redbagobject="redbagobject" maxamount="1.88" @openfixredbag="openfixredbag" jointip="实名认证后的用户才可提现哦~"></firstredbg>
		<!--参与抽奖领红包进度-->
		<redbagfix ref="redbagfix" :style="{visibility:dayredbagshow}" @closefixredbag="closefixredbag"></redbagfix>
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	const subNVue = uni.getSubNVueById('map_widget')
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				moonlight:[],//推荐任务
				promotion:false,//app图标是否直接分享好友
				topbarheight: 80, //topbar高度
				isshowtopbar: false,
				giftlist: [],
				swiperList: [],
				dayredbagshow: 'visible', //是否显示每日进度红包
				//isshowGuide: false, //是否需要用户引导
				userinfo: '',
				visible: false, //显示和隐藏alret框

				globelloading: true,
				//新人红包对象
				redbagobject: {
					icon: 'newuser', //显示新人专享图标
					rand: true, //是否出现随机值
					maintitle: '新人红包待领取', //主标题
					subtitle: '首次进入天天有礼专享', //副标题
					maxamount: 1.88 //最高随机金额 
				},

				downOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					bgColor: "#378aff",
					textLoading: '玩命加载中...',
					outOffsetRate: 0,
					autoShowLoading: true, //自动执行一次下来 
					textSuccess: "刷新成功",
				},
				//上拉参数配置
				upOption: {
					auto: false,
					noMoreSize: 4,
					empty: {
						//use:false
						tip: '~ 搜索无数据 ~',
						btnText: ''
					},
					blacks: false,
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				},
				prizelist: [],
				notice: [],
				appicon: [],
				apptouchday: [], //已触发appicon的数组
				isshowlist: false, //是否显示列表数据
				routelist: '',
				dreawtitle: '',
				filternum: '',
				hotvesion: false, //热更新版本

			}
		},
		onLoad() {
			//关闭原生子窗体
			uni.$on('closeupdate_componet', () => {
				const subNVue = uni.getSubNVueById('map_widget')
				subNVue.hide('fade-out', 300)
			})
			//关闭交互框
			uni.$on("closewindown", (option) => {
				this.visible = option;
				//如果进度红包未开启，则开启红包进度
				console.log('触发到首页数据')
				//this.redbag_dayprogress()
			})
		},
		onShow() {
			//用户返回页面需刷新app图标红点
			if (this.appicon.length) {
				this.apptouchs();
			}
		},
		onHide() {
			console.log('index hidden')
			// uni.$off() 
		},
		computed: {
			//关闭每日悬浮红包！
			fixisshow() {
				//console.log('关闭每日悬浮红包！')
				return this.$common.state.fixredbagshow;
			},
			isjoindreaw() {
				//奖品ID是否改变
				return this.$common.state.dreawid;
			},
			guideflags() {
				//是否需要引导
				return this.$common.state.ttylguide;
			}
		},
		watch: {
			//获取到奖品列表后全局加载消失
			prizelist() {
				setTimeout(() => {
					this.globelloading = false;
				}, 800)
			},
			//接受关闭悬浮红包
			fixisshow(value) {
				this.dayredbagshow = 'hidden';
			},
			//是否参与抽奖标识
			isjoindreaw(id) {
				this.joinnow(id);
			},
			//监听app图标是否有值
			appicon() {
				this.apptouchs();
			},
			guideflags(option) {
				this.isshowGuide = option
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.isshowtopbar = true
			} else {
				this.isshowtopbar = false
			}
			//设置topbar高端
			// if(plus.os.name == 'Android'){ 
			// 	this.topbarheight = 80
			// }
		},
		methods: {
			//关闭每日红包
			closefixredbag() {
				this.dayredbagshow = 'hidden';
			},
			//领取完新人红包后打开每日红包进度
			openfixredbag() {
				this.dayredbagshow = 'visible';
				this.$nextTick(function() {
					this.$refs.redbagfix.bagprgress(true);
				})
			},
			//是否要弹出新人红包
			ejectredbag() {
				this.$nextTick(() => {
					setTimeout(() => {
						this.visible = true
					}, 1500)
				})
			},
			//查看用户是否领取过新人红包
			alreayred() {
				this.$HttRequest({
					url: '/redEnvelope/welcomeReceive',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						//reward为true弹出新人红包
						if (res.data.reward) {
							this.ejectredbag();
							this.dayredbagshow = 'hidden';
						}
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
				});
			},
			//是否显示每日悬浮红包
			redbag_dayprogress() {
				this.$nextTick(function() {
					console.log('redbag_dayprogress')
					this.$refs.redbagfix.bagprgress(true);
				})
			},
			downCallback() {
				console.log('downCallback')
				this.init();
				this.mescroll.removeEmpty()
				if (!this.isshowlist) {
					this.mescroll.lockUpScroll(true)
				}
			},

			upCallback(page) {
				console.log('upCallback')
				//console.log(page.num);
				this.getinitdata(page.num).then(res => {
					console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.giftlist = [] //如果是第一页需手动制空列表
					this.giftlist = this.giftlist.concat(res) //追加新数据
				}).catch(error => {
					this.mescroll.endErr()
					this.$ShowMsg('error::' + JSON.stringify(error))
				})
			},

			getinitdata(page) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: this.routelist,
						param: {
							page: page
						}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},

			init() {
				this.$HttRequest({
					url: '/index/index',
					param: ''
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						//检测更新本版
						this.testVersion()
						this.notice = res.data.mascot; //APP公告
						this.appicon = res.data.menu; //app图标菜单 
						this.swiperList = res.data.carousel //轮播图 
						this.promotion = res.data.promotion //是否直接分享
						this.moonlight = res.data.moonlight //推荐任务
						// setTimeout(()=>{
						// 	this.swiperList = res.data.carousel //轮播图 
						// },15000)
						//更新用户的金币和提现金额
						this.userassets(res)
						//获取用户信息
						//this.getmember()
						//是否显示新人红包
						this.alreayred()
						//app消息通知角标
						this.messageshow()
						//是否显示进度红包
						this.redbag_dayprogress()
						//获取奖品列表数据
						this.getprizeList()
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('error:：' + JSON.stringify(error));
					console.log(error);
				})
			},
			//更新用户的金币和提现金额
			userassets(res) {
				let assets = {
					integral: res.data.integral,
					money: res.data.money,
				}
				for (let key in assets) {
					this.$changefield(key, assets[key])
				}
				this.getmember();
			},
			//获取奖品列表数据
			getprizeList() {
				this.$HttRequest({
					url: '/lottery/lists',
					param: ''
				}).then((res) => {
					//console.log(res)
					if (res.status === 10000) {

						this.prizelist = res.data.list; //奖品列表
						this.mescroll.endSuccess();
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
				})
			},
			//跳转更多任务
			moretask(){
				uni.switchTab({
					url:'/pages/task/task'
				})
			},
			//去任务详情页面
			gototask(id){
				uni.navigateTo({
					url:'/pages/task/detail?id='+id
				})
			},
			//appicon导航
			navgoto(path, index) {
				//如果分享是promotion为false直接分享
				if(index==2 && !this.promotion){
					this.sharequn()
				}else{
					if(index==2 ){
						//判断是否需要登陆
						if(this.$Logintip()) {
							this.sharequn()
							return
						}
					}
					uni.navigateTo({
						url: path + '?index=' + index
					})	 
				}
			},
			
			//appicon图片导航
			// navgoto(path, index) {
			// 	let appicon_item = this.appicon[index]
			// 	//如果是实物抽奖或红包抽奖
			// 	if (appicon_item.weight == 3 || appicon_item.weight == 4) {
			// 		//更新app图标红点
			// 		this.isshowlist = true
			// 		this.mescroll.lockUpScroll(false)

			// 		//首次加载数据
			// 		if (appicon_item.weight == 3) {
			// 			this.routelist = '/lottery/entityLottery'
			// 			this.dreawtitle = '实物'
			// 		} else if (appicon_item.weight == 4) {
			// 			this.routelist = '/lottery/redLottery'
			// 			this.dreawtitle = '红包'
			// 		}
			// 		//是否再次按相同的小图标
			// 		if (appicon_item.weight == this.filternum) {
			// 			//关闭列表显示
			// 			this.isshowlist = false
			// 			this.filternum = ''
			// 			return
			// 		}
			// 		this.filternum = appicon_item.weight
			// 		this.mescroll.resetUpScroll()
			// 		this.$redpoint({
			// 			index: index
			// 		});
			// 		this.apptouchs();
			// 		return
			// 	}
			// 	uni.navigateTo({
			// 		url: path + '?index=' + index
			// 	})
			// },
			//今日是否触发APP图标
			apptouchs() {
				let ttyldate = new Date();
				let apptouchdays = uni.getStorageSync('apptouchday');
				//如果没有今天的触发数组则创建当天触发数组
				if (!apptouchdays || apptouchdays[apptouchdays.length - 1] != ttyldate.getDate()) {
					let tempapp = [];
					this.appicon.map((item, index) => {
						tempapp[index] = false;
					})
					tempapp[tempapp.length] = ttyldate.getDate();
					uni.setStorageSync('apptouchday', tempapp);
				}
				this.apptouchday = uni.getStorageSync('apptouchday');
				//console.log(this.apptouchday)
			},
			//我要上首页
			gotoindex(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			//分享朋友或群
			sharequn() {
				let _this = this;
				let shareurl = getApp().globalData.ruleconfig.domain + "thirdParty/app/invite?state=" + this.userinfo.recommend_id
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: shareurl,
					title: '【' + this.userinfo.nickname + '】' + '@你参与免费抽奖',
					summary: '天天有礼拥有众多商家提供的各类精美奖品，所有用户均可免费参与抽奖，中奖后的用户即可获得对应奖品',
					imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
					success: function(res) {
						_this.$HttRequest({
							url: '/task/share',
							param: ''
						}).then((res) => {
							if (res.status === 10000) {
								_this.$ShowMsg('分享朋友朋友或群成功！')
							}
						}).catch((error) => {
							//异常错误
							_this.$ShowMsg('statusCode：' + error);
							console.log(error);
						})
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			//获取用户信息
			getmember() {
				let user_info = uni.getStorageSync('user_info')
				this.userinfo = user_info ? user_info : this.$Initdata
				//this.$common.state.ttylguide = 1//this.userinfo.lottery_app
				console.log(this.userinfo)
			},

			//设置个人中心通知角标 (setTabBarBadge(数字) showTabBarRedDot(红点)移除(removeTabBarBadge,hideTabBarRedDot))
			messageshow() {
				this.$HttRequest({
					url: '/message/list',
					param: ''
				}).then(res => {
					// console.log(res)
					if (res.data.length > 0) {
						uni.showTabBarRedDot({
							index: 3
						})
						this.$common.state.messagecount = res.data.length
					}
				}).catch(error => {
					this.$ShowMsg('error::' + JSON.stringify(error))
					console.log(error)
				})
			},

			//是否参与抽奖
			joinnow(dreaw_id) {
				//修改奖品ID的数据
				this.prizelist['recommend'].map((item, index) => {
					// console.log(item);
					if (item.id == dreaw_id) {
						this.prizelist['recommend'][index].iId = 1;

					}
				})
				this.prizelist['excellent'].map((item, index) => {
					if (item.id == dreaw_id) {
						this.prizelist['excellent'][index].iId = 1;
					}
				})
				this.prizelist['self'].map((item, index) => {
					if (item.id == dreaw_id) {
						this.prizelist['self'][index].iId = 1;

					}
				})
			},

			//APP更新提醒
			testVersion() {
				console.log('拉取更新数据')
				this.$HttRequest({
					url: '/index/version',
					param: {
						"appid": plus.runtime.appid
					}
				}).then(res => { 
					console.log(res)
					//检测热更新版本
					let _this = this
					plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
						console.log(wgtinfo.versionCode, res.data.hot_version)   
						if (wgtinfo.versionCode < res.data.hot_version) {  
							//提示热更新数据 
							res.data.hot = true
							console.log(res.data)
							uni.$emit('page-popup', {
								data: res.data
							})
							return 
						}
						let ttylVersion = plus.runtime.versionCode
						//console.log(ttylVersion)
						if (plus.os.name == 'Android') {
							//安卓版本比较
							if (res.data.and_new_version > ttylVersion) {
								//是否需要唤醒子窗体
								subNVue.show('slide-in-bottom', 300, () => {
									//处理版本号信息
									res.data.android_version = 'V' + (res.data.and_new_version).split('').join('.')
									//需要强制更新时隐藏关闭按钮
									res.data.android_closebutton = res.data.and_min_version > ttylVersion ? false : true
									uni.$emit('page-popup', {
										data: res.data
									})
									console.log(res.data, 'android')
								})
							}
						} else if (plus.os.name == 'iOS') {
							//IOS版本比较
							if (res.data.new_version > ttylVersion) {
								subNVue.show('slide-in-bottom', 300, function() {
									//处理版本号信息
									res.data.ios_version = 'V' + (res.data.new_version).split('').join('.')
									//需要强制更新时隐藏关闭按钮
									res.data.ios_closebutton = res.data.min_version > ttylVersion ? false : true
									uni.$emit('page-popup', {
										data: res.data
									})
									console.log(res.data, 'ios')
								})
							}
						}
					})
				}).catch(error => {
					console.log(error);
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.topbar {
		z-index: 999;
		background-color: $uni-color-primary;

		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		transition: all 0.3s ease-in-out;
	}

	.topbarshow {
		opacity: 1;
	}

	.topbarhidden {
		opacity: 0
	}

	.index-bottom {
		width: 100%;
		background-color: #f0f0f0;
	}

	.pushtop {
		color: #2c6ecc;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
		padding-bottom: 50rpx;

		text {
			margin-left: 10rpx;
		}
	}


	.share {
		width: 100vw;
		padding: 20rpx 0;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;

		.share-box {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.share-title {
				font-weight: bold;
				font-size: 35rpx;
				color: #e15b52;

			}

			.share-right {
				font-size: 25rpx;
				color: #7a7a7a;
				.iconfont{
					color: #7a7a7a;
					font-size: 25rpx;
				}
				.line {
					margin: 0 10rpx;
				}
			}
		}
	}
	//推荐任务10条
	.task-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 0 auto;
		// margin: 20rpx 0;
		// margin-bottom: 30rpx;
		position: relative;
		background-color: #fff;
		padding: 30rpx 32rpx;
		border-bottom: 1rpx solid #f4f4f4;
		.task-item {
			display: flex;
			align-items: center;
			justify-content: flex-start;
	
			image {
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
	
			.task-detail {
				display: flex;
				justify-content: flex-start;
				align-content: center;
				flex-direction: column;
	
				.task-app {
					color: #333;
					font-weight: bold;
					font-size: 30rpx;
				
				}
				.task-category{
					margin: 10rpx 0;
					background-color: #f7f7f7;
					color: #333;
					font-size: 22rpx;
					border-radius: 10rpx;
					width: 95rpx;
					padding: 5rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					
				}
				.task-count {
					font-size: 22rpx;
					color: #9e9e9e;
	
					.red-tip {
						color: #ee8078;
					}
				}
			}
		}
	
		.commission {
			color: #e6594c;
			font-size: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			
			.timer {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 25rpx;
				font-weight: normal;
				.small-size{
					font-size: 22rpx;
				}
			}
			.money {
				margin: 0 2rpx;
			}
	
			.add {
				font-weight: normal;
				font-size: 22rpx;
	
			}
	
			.yang {
				font-weight: normal;
				font-size: 23rpx;
			}
		}
	
	}
	
	
	//推荐任务3条
	.task-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		// border: 1rpx solid #000;
		margin: 0 auto;
		.item-box{
		
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;
			flex-direction: column;
			width: 210rpx;
			padding-top:130rpx ;
			padding-bottom:20rpx;
			margin-top: 30rpx;
			.cate{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 8rpx;
				background-color: #f8f8f8;
				color: #9e9e9e;
				padding: 5rpx 10rpx;
				font-size: 20rpx;
				border-radius: 15rpx;
			}
			.title{
				font-size: 25rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
				// border: 1rpx solid #000; 
				// width: 72%;
				// align-items: center;
				width: 72%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			image{
				position: absolute;
				top: -20rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 10rpx solid #fff;
			}
			.money{
				margin-top: 10rpx;
				color: #F43F3B;
				display: flex;
				justify-content:  center;
				align-items:center  ;
			
				font-size: 32rpx;
				font-weight: bold;
				// border: 1rpx solid #000;
				text{
					display: flex;
					justify-content:  flex-end;
					align-items: flex-end;
					
					margin-right: 5rpx;
					font-size:18rpx;
				}
			}
		}
	}
	.ttyl-logo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 75rpx;
		padding-bottom: 32rpx;
		background-color: $uni-color-primary;
		// border: 1rpx solid #000; 
		.logoicon {
			width: 178rpx;
			height: 38rpx;
		}
	}

	.top {
		background-color: #fff;
		width: 100%;
		padding-top: 10rpx;
		position: relative;
		// .dieswiper {
		// 	width: 100%;
		// 	border: 1rpx solid #000;
		// 	// position: absolute;
		// 	// display: block;
		// 	// left: 0;
		// 	// top: -150rpx;
		// 	// z-index: 88;
		// }

		.appicon {
			width: 80%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			padding-bottom: 35rpx;

			.icon-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.filter {
					filter: grayscale(100%);
				}

				.appicontext {
					display: flex;
					justify-content: flex-start;
					flex-wrap: nowrap;

					.origins {
						border-radius: 50%;
						width: 10rpx;
						height: 10rpx;
						background-color: #fa5151;
					}
				}

				image {
					width: 95rpx;
					height: 95rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 25rpx;
					color: #1a1a1a;
				}
			}
		}

		.notice {
			border-bottom: 1rpx solid #f4f4f4;
			width: 100vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #ababab;
			font-size: 25rpx;
			background-color: #fff;
			.notice-right {
				padding: 0 20rpx;
				height: 60rpx;
				flex: 8;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.swipermore {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25rpx;
					width: 80rpx;
					height: 50rpx;
				}

				.swiper {
					width: 580rpx;
					height: 55rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.textwidth {
						height: 52rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 95%;
						display: flex;
						justify-content:  flex-start;
						align-items: center;
						 // border: 1rpx solid #000;
					}
				}

				text {
					width: 60rpx;
					font-size: 40rpx;
					margin-left: 10rpx;

				}
			}

			.notice-left {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}

		}
	}
</style>
